<template>
  <div style="display: flex;">
    <div v-move  @click="switchCom(item,index)" :class="[active==index? 'active':'']" class="tabs" v-for="(item,index) in data">
            <div>{{ item.name }}</div>
    </div>
  </div>
  <component :is="comId"></component>   
</template>
<script setup lang="ts">
import { reactive ,ref} from "vue";

import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";
const comId=ref(A);
const active=ref(0)
const switchCom=(item,index)=>{
    comId.value=item.com;
    active.value=index;  
}
const data = reactive([
  {
    name: "A组件",
    com: A,
  },
  {
    name: 'B组件',
    com: B,
  },
  {
    name: 'C组件',
    com: C,
  }
]);
</script>
<style scoped lang="scss">
.active{
    background-color: skyblue;
}
 .tabs{
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin:  5px;
    cursor: pointer;
 }

</style>
